import React, { memo, useEffect, useState } from 'react';
import { Spin, Button, Tooltip, Modal, message } from 'antd';
import { formatMessage } from 'umi';
import cn from 'classnames';
import {
    querySalaryMonthItemData,
    onEditMonthTemplate
} from '@/services/salaryManage/salaryCalculate.js';
// @ts-ignore
import TemplateSalaryModal from '../../../components/TemplateSalaryModal';
import styles from '../../../index.less'


const EditSalaryMainModal = ({
    visible = false,
    onSave = () => {},
    onCancel = () => {},
    currentYear,
    currentMonth,
    templateId,
    currentOrgCode
}) => {
    const [monthModalLoading, setMonthModalLoading] = useState(false);
    const [mainVisible, setMainVisible] = useState(false);
    const [oldAddList, setOldAddList] = useState([]);
    const [oldReduceList, setOldReduceList] = useState([]);
    const [newAddList, setNewAddList] = useState([]);
    const [newReduceList, setNewReduceList] = useState([]);
    const onSelectCommonMethod = (
        item,
        index,
        deleteDataList,
        deleteDataListMethod,
        addDataList,
        addDataListMethod
    ) => {
        // 删除当前已选中  移动到可添加列表中
        const deleteDataListCopy = deleteDataList.slice();
        const addDataListCopy = addDataList.slice();
        deleteDataListCopy.splice(index, 1);
        addDataListCopy.push(item);
        deleteDataListMethod(deleteDataListCopy);
        addDataListMethod(addDataListCopy);
    };
    const onModalSave = async () => {
        try {
            setMonthModalLoading(true);
            const salaryItemIds = [];
            oldAddList.forEach(item => {
                salaryItemIds.push(item.id)
            });
            oldReduceList.forEach(item => {
                salaryItemIds.push(item.id)
            });
            const { code } = await onEditMonthTemplate({
                salaryItemIds,
                templateId
            });
            if (code === 10000) {
                message.success('保存成功！');
                onCancel();
                onSave();
            }
        } catch (e) {
            console.log(e);
        }
    };
    const getCurrentMonthSalarySetting = async () => {
        try {
            setMonthModalLoading(true);
            const { code, data } = await querySalaryMonthItemData(currentYear, currentMonth);
            if (code === 10000) {
                setOldAddList(data.usedAddSalaryItems || []);
                setOldReduceList(data.usedLessSalaryItems || []);
                setNewAddList(data.unusedAddSalaryItems || []);
                setNewReduceList(data.unusedLessSalaryItems || []);
            }
            setMonthModalLoading(false);
        } catch (e) {
            console.log(e);
            setMonthModalLoading(false);
        }
    };
    useEffect(() => {
        if (visible) {
            getCurrentMonthSalarySetting()
        }
    }, [visible]);
    return <Modal
        title="薪资构成要素"
        visible={visible}
        width={880}
        onOk={onModalSave}
        onCancel={onCancel}
        className={styles.editSalaryMainModal}
    >
        <Spin spinning={monthModalLoading}>
            <div className={styles.editSalaryMainModalContainer}>
                <div className={styles.oldWrap}>
                    <div className={styles.oldWrapTitle}>已添加薪资项</div>
                    <div className={styles.oldContentWrap}>
                        <div className={styles.itemTitle}>
                            <i className="icon iconfont iconsalary_add_icon"
                                style={{ fontSize: 14, color: 'rgba(79, 216, 123, 1)' }}
                            />
                            <span className={styles.itemTitleText}>{formatMessage({ id: 'templateSetting.salaryTemplate.salaryAddItem' })}</span>
                        </div>
                        <div className={styles.oldItemList}>
                            {
                                oldAddList.map((item, index) =>
                                    <div className={styles.oldItemLabelWrap} key={item.id}>
                                        <div className={styles.oldItemLabelContent}>
                                            <Tooltip title={item.parentTitle}>
                                                <span className={styles.oldItemLabel}>{item.parentTitle}</span>
                                            </Tooltip>
                                            <Tooltip title={item.title}>
                                                <span className={styles.oldItemLabel}>{item.title}</span>
                                            </Tooltip>
                                        </div>
                                        <i
                                            className={cn('icon iconfont iconclose_o', styles.olaItemClose)}
                                            onClick={() => {
                                                onSelectCommonMethod(
                                                    item,
                                                    index,
                                                    oldAddList,
                                                    setOldAddList,
                                                    newAddList,
                                                    setNewAddList
                                                )
                                            }}
                                        />
                                    </div>
                                )
                            }
                        </div>
                        <div className={styles.itemTitle}>
                            <i className="icon iconfont iconsalary_minus_icon"
                                style={{ fontSize: 14, color: 'rgba(255, 121, 67, 1)' }}
                            />
                            <span className={styles.itemTitleText}>{formatMessage({ id: 'templateSetting.salaryTemplate.salaryReduceItem' })}</span>
                        </div>
                        <div className={styles.oldItemList}>
                            {
                                oldReduceList.map((item, index) =>
                                    <div className={styles.oldItemLabelWrap} key={item.id}>
                                        <div className={styles.oldItemLabelContent}>
                                            <Tooltip title={item.parentTitle}>
                                                <span className={styles.oldItemLabel}>{item.parentTitle}</span>
                                            </Tooltip>
                                            <Tooltip title={item.title}>
                                                <span className={styles.oldItemLabel}>{item.title}</span>
                                            </Tooltip>
                                        </div>
                                        <i
                                            className={cn('icon iconfont iconclose_o', styles.olaItemClose)}
                                            onClick={() => {
                                                onSelectCommonMethod(
                                                    item,
                                                    index,
                                                    oldReduceList,
                                                    setOldReduceList,
                                                    newReduceList,
                                                    setNewReduceList
                                                )
                                            }}
                                        />
                                    </div>
                                )
                            }
                        </div>
                    </div>
                </div>
                <div className={styles.newWrap}>
                    <div className={styles.newWrapTitleWrap}>
                        <div className={styles.newWrapTitle}>请点击按钮的“+”，添加需要的薪资项</div>
                        <div className={styles.newSettingBtnWrap}>
                            <span className={styles.newSettingBtnHit}>没有所需薪资项？</span>
                            <Button onClick={() => {
                                setMainVisible(true);
                            }}>新增配置</Button>
                        </div>
                    </div>
                    <div className={styles.newContentWrap}>
                        <div className={styles.itemTitle}>
                            <i className="icon iconfont iconsalary_add_icon"
                                style={{ fontSize: 14, color: 'rgba(79, 216, 123, 1)' }}
                            />
                            <span className={styles.itemTitleText}>{formatMessage({ id: 'templateSetting.salaryTemplate.salaryAddItem' })}</span>
                        </div>
                        <div className={styles.newItemList}>
                            {
                                newAddList.map((item, index) =>
                                    <div className={styles.newItemLabelWrap} key={item.id}>
                                        <div className={styles.newItemLabelContent}>
                                            <Tooltip title={item.parentTitle}>
                                                <span className={styles.newItemLabel}>{item.parentTitle}</span>
                                            </Tooltip>
                                            <Tooltip title={item.title}>
                                                <span className={styles.newItemLabel}>{item.title}</span>
                                            </Tooltip>
                                        </div>
                                        <i className={cn('icon iconfont iconadd_function_o', styles.newItemAdd)}
                                            onClick={() => {
                                                onSelectCommonMethod(
                                                    item,
                                                    index,
                                                    newAddList,
                                                    setNewAddList,
                                                    oldAddList,
                                                    setOldAddList
                                                )
                                            }
                                            }
                                        />
                                    </div>
                                )
                            }
                        </div>
                        <div className={styles.itemTitle}>
                            <i className="icon iconfont iconsalary_minus_icon"
                                style={{ fontSize: 14, color: 'rgba(255, 121, 67, 1)' }}
                            />
                            <span className={styles.itemTitleText}>{formatMessage({ id: 'templateSetting.salaryTemplate.salaryReduceItem' })}</span>
                        </div>
                        <div className={styles.newItemList}>
                            {
                                newReduceList.map((item, index) =>
                                    <div className={styles.newItemLabelWrap} key={item.id}>
                                        <div className={styles.newItemLabelContent}>
                                            <Tooltip title={item.parentTitle}>
                                                <span className={styles.newItemLabel}>{item.parentTitle}</span>
                                            </Tooltip>
                                            <Tooltip title={item.title}>
                                                <span className={styles.newItemLabel}>{item.title}</span>
                                            </Tooltip>
                                        </div>
                                        <i
                                            className={cn('icon iconfont iconadd_function_o', styles.newItemAdd)}
                                            onClick={() => {
                                                onSelectCommonMethod(
                                                    item,
                                                    index,
                                                    newReduceList,
                                                    setNewReduceList,
                                                    oldReduceList,
                                                    setOldReduceList
                                                )
                                            }}
                                        />
                                    </div>
                                )
                            }
                        </div>
                    </div>
                </div>
            </div>
        </Spin>
        <TemplateSalaryModal
            entry="mul"
            visible={mainVisible}
            currentOrgCode={currentOrgCode}
            onCancel={() => {
                setMainVisible(false)
            }}
            onChange={() => {
                setMainVisible(false);
                getCurrentMonthSalarySetting();
            }}
        />
    </Modal>
};
export default memo(EditSalaryMainModal)
